* {
  box-sizing: border-box;
}

$text-color: #2d2e33;

html {
  color: $text-color;

  // font-size: 14px;
}

body,
#app {
  font-family: 'Helvetica Neue', Helvetica, 'PingFang SC', 'Hiragino Sans GB',
    'Microsoft YaHei', '微软雅黑', 'Proxima Nova', Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  margin: 0;
  @apply w-screen h-screen;

  // min-w-[1280px]
  color: var($text-color) !important;
}

a {
  color: var(--el-color-primary);
}

// 进度条颜色
#nprogress .bar {
  background: #164cff !important;
}

code {
  border-radius: 2px;
  padding: 2px 4px;
  background-color: var(--el-color-primary-light-9);
  color: var(--el-color-primary);
}

.flex-1 {
  flex: 1 !important;
}

.text-minor {
  @apply text-[#83858A] text-[12px];
}

.basic-page {
  @apply px-[24px] flex-1 h-full flex flex-col overflow-hidden;
}

.basic-page-header {
  @apply h-[64px] flex items-center;

  min-height: 64px;

  &.hide-back-text {
    .el-page-header__left {
      .el-page-header__back {
        & + .el-divider[role='separator'],
        .el-page-header__title {
          display: none;
        }
      }
    }
  }
}

.dotClass {
  width: 6px;
  min-width: 6px;
  height: 6px;
  border-radius: 50%;
  display: block;
  text-align: center;
}

.page-shadow {
  box-shadow:
    0 4px 5px 0 rgba(31, 35, 41, 0.08),
    0 2px 4px 0 rgba(31, 35, 41, 0.04) !important;
}

// 按钮刷新-动画
@keyframes loading {
  from {
    transform: rotate(360deg);
  }

  to {
    transform: rotate(0deg);
  }
}

.refresh-icon {
  @apply flex items-center w-4 h-[16px];

  transform-origin: 43% 52%;

  &__animation {
    animation: loading 1s ease-out infinite forwards;
  }
}
